<template>
	<view class="container">
		<time-zone class="timeZone">
			<view class="time_font"  slot="content">
				拼单倒计时
			</view>
			<view class="interVal"  slot="content">
				<u-count-down ref="uCountDown"
				 :timestamp="90000" 
				 :autoplay="true"
				 :separator="zh"
				 :separator-size='24'
				 font-size="44"
				 bgColor="url(../../../static/image/interval_bg.png) no-repeat 0 0/100% 100%"
				 color="#333333"
				 separator-color="#fff"
				 
				 ></u-count-down>
			</view>
		</time-zone>
		<view class="rest_person">
			还差<text>1</text>人，赶快邀请好友来拼单吧
		</view>
		<view class="invite_cont">
			<button type="default">邀请好友</button>
			<button type="default">去首页逛逛</button>
		</view>

		<view class="Roles">
			<view class="role_title">
				拼单规则：
			</view>
			<view class="role_right">
				在限时内，拼团人数达标即为拼团成功。不满退款
			</view>
		</view>
		<view class="goods_contain">
			<view class="column_title">
				精选推荐
			</view>
		
			<u-waterfall class="goods_content" v-model="flowList">
				<template v-slot:left="{leftList}">
					<goodItme v-for="(item, index) in leftList" :img="item.image" :price="item.price":dec="item.dec" />
				</template>
				<template v-slot:right="{rightList}">
					<goodItme v-for="(item, index) in rightList" :img="item.image" :price="item.price" :dec="item.dec" />
				</template>
			</u-waterfall>
		</view>
	
	</view>
</template>

<script>
	import shopHead from '@/plugins/shop_header/shop_header.vue'
	import addBtn from "@/plugins/add_btn/add_btn.vue"
	import timeZone from "@/plugins/timeZone/timeZone.vue"
	import footerBar1 from "@/plugins/footerBar1/footerBar1.vue"
	export default {
		data() {
			return {
				navlist: ["智能空调", "家用电器", "厨卫大电", "生活电器", "北欧家居", "热水器"],
				navIndex: 0,
				flowList: [{
						price: 35,
						title: '测试商品1',
						dec :'测试商品1的描述',
						image: '/static/image/goods_item.png',
					},
					{
						price: 75,
						title: '测试商品2',
						dec: '测试商品21231的描去啊阿萨大情为全文述',
						image: '/static/image/goods_item.png',
					},
					{
						price: 385,
						title: '测试商品3',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
					{
						price: 3825,
						title: '测试商品4',
						dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
						image: '/static/image/goods_item.png',
					},
				]
			};

		},
		
		components: {
			shopHead,
			addBtn,
			footerBar1,
			timeZone
		},
		methods: {
			navTap(index) {
				this.navIndex = index
			},

		}
	}
</script>

<style lang="scss" scoped>
	$paddingboth:30rpx;

	page {
		box-sizing: border-box;
		
		width: 100%;
		background-color: #f5f5f5;
	}

	.container {
		background-color: #f5f5f5;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		
			.time_font{
				text-align: center;
				color: #fff;
				font-size: 32rpx;				
			}
			.interVal{
				text-align: center;
				margin-top: 36rpx;
			}
			
		.rest_person{
			margin-top: 30rpx;
			font-size: 30rpx;
			color: #333333;
			text-align: center;
			text{
				color: #F8321D;
			}
		}
		.invite_cont{
			padding: $paddingboth $paddingboth 20rpx;
			box-sizing: border-box;
			button{
				background: #F8321D;
				font-size: 30rpx;
				height: 80rpx;
				color: #fff;
				border: none;
				&:last-child{
					margin-top: 20rpx;
				}
			}
		}
		.Roles{
			display: flex;
			font-size: 30rpx;
			margin: 20rpx 0;
			box-sizing: border-box;
			padding:$paddingboth ;
			background-color: #fff;
			align-items: center;
			justify-content: space-between;
			.role_title{
				color: #333333;
			}
			.role_right{
				font-size: 24rpx;
				color:#999999
			}
		}
		.goods_contain {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background-color: #FFF;
			margin-top: 20rpx;
			.column_title{
				font-size: 30rpx;
				text-align: center;
				font-weight: 600;
				margin-top: 20rpx;
			}
			
		
			
		
			.goods_content {
				margin-top: 10rpx;
				// display: flex;
				// flex-wrap: wrap;
				// box-sizing: border-box;
				width: 100%;
				// justify-content: space-between;
		
			}
		}
	}
	
</style>
